<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
    <style>
        h1 {
            margin: 2rem;
        }
    </style>
</head>

<body>
<div>

    <div>
        <div>
            <div id='div1'></div>
        </div>
    </div>

    <div>
        <div>
            <div id='div2'></div>
        </div>
        <div>          
            <div id="json2">

            </div>
        </div>
    </div>

</div>
</body>
<script type="module">
    import xUpdateModal from './js/src/xUpdateModal.js';

    import {regionsForSelect,citysForRadio,china,regionsForMSelect} from './js/data/panel.js';
       
       
    
    let obj1 = {
    	checkbox:null,
    	radio:null
    	
    };
    
    console.log(obj1);

    let binds1 = [{
        type: 'input',
        key: 'checkbox',
        cfg: {
            type: 'checkbox',
            placeholder: '请选择城市(多选)',
            data: citysForRadio,
            mandatory: true
        },
        label: '城市'
    },
        {
            type: 'input',
            key: 'radio',
            cfg: {
                type: 'radio',
             
                data: citysForRadio,
                mandatory: true
            },
            label: '城市'
        },
        
        
        
        {type: 'mSelect',
        key: 'mSelect',
        cfg: {
            cols:3,
            tag:true,
            placeholder: '多选',
            data: regionsForMSelect,
            mandatory: true
        },
        label: '区域'
    },
    {type: 'xSelect',
        key: 'xSelect',
        cfg: {
            placeholder: '支持输入过滤包括pinyin',
            data: regionsForSelect,
            mandatory: true
        },
        label: '区域'
    },
    
    {type: 'xCascade',
        key: 'cascade',
        cfg: {
            
            tab:['省','市','区'],
            placeholder: '请选择区域',
            data: china,
            mandatory: true
        },
        label: '区域'
    },
    
    
            {
            type: 'zInput',
            key: 'zInput',
            cfg: {
            	key:'phone',
                mandatory: true
            },
            label: '电话'
        },
        
        {
            type: 'input',
            key: 'rate',
            cfg: {
            	type:'rate', 
                mandatory: true
            },
            label: '评分'
        },
        
           {
            type: 'input',
            key: 'xswitch',
            cfg: {
            	type:'switch', 
            	data:'关闭,开启',
                mandatory: true
            },
            label: '日志'
        },     
        
        {
            type: 'input',
            key: 'color',
            cfg: {
            	type:'color', 
            	 
                mandatory: true
            },
            label: '颜色'
        },  
        
        {
            type: 'input',
            key: 'range',
            cfg: {
            	type:'range',           	 
                mandatory: true
            },
            label: '范围'
        }, 
        
    {type: 'xDatePicker',
        key: 'date',
        cfg: {
            placeholder: '请选择日期',           
            mandatory: true
        },
        label: '日期'
    },
     
    
    {type: 'xUpload',
        key: 'img',
        col: 'col-md-12',   /*独占一行*/
        cfg: {
        	url:'http://127.0.0.1/upload',
		    path:"http://127.0.0.1:8020/x-ui/img/upload",
		    size:4,             /*0 是无限制*/
		    cols:4,
		    type:"img",
		    accept:"image/*",		
            placeholder: '请上传图片',           
            mandatory: true
        },
        label: '图片'
    },
    
    {type: 'xUpload',
        key: 'file',
        col: 'col-md-12',   /*独占一行*/
        cfg: {
        	url:'http://127.0.0.1/upload',
		    path:"http://127.0.0.1:8020/x-ui/img/upload",
		    size:2,             /*0 是无限制*/
		    style:'upload-file',
		    type:"file",
		 
            placeholder: '请上传文件',           
            mandatory: true
        },
        label: '文件'
    },
    
    
            {
            	 col: 'col-md-12',   /*独占一行*/
            type: 'xTextarea',
            key: 'textarea',
            cfg: {
            	 placeholder:'请输入备注',
            	 rows:8
            },
            label: '备注'
        }
    ]


    new xUpdateModal({ 
    	style:'modal-xl',
        binds: binds1,
        col: 'col-md-6',
        grid: 'container',
        obj: obj1 
    }).show();


</script>

</html>